<template>
  <div class="system-menu-container">
		<div class="system-user-search mb15">
			<el-form :model="param" :inline="true" ref="queryFormRef" @keyup.enter.native="loadList">
			</el-form>
		</div>
		<div class="home_common background_bg6">
			<div class="btnStyle">
				<el-button  type="success" icon="ele-Refresh" @click="loadList">刷新</el-button>
				<el-button  type="primary" icon="ele-Plus" @click="addHandle()" >新增</el-button>
				<!-- <el-button  type="danger" icon="ele-Edit" @click="addOrUpdateHandle()" :disabled="dataListSelections.length !== 1">修改</el-button>
				<el-button  type="danger" icon="ele-Delete" @click="deleteHandle()" :disabled="dataListSelections.length <= 0 || hasDelFile">删除</el-button> -->
			</div>
		</div>
		<el-table :data="dataList" border v-loading="listLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
			<el-table-column prop="id" type="selection" width="50"> </el-table-column>
			<el-table-column prop="appname" label="AppName" ></el-table-column>
			<el-table-column prop="title" label="名称" ></el-table-column>
			<el-table-column prop="addressType" label="注册方式" :formatter="formatAddressType"></el-table-column>
			<el-table-column prop="registryList" label="已注册机器地址" ></el-table-column>
			<el-table-column header-align="center" align="center" width="120" label="操作">
				<template  #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row)" >修改</el-button>
					<el-button type="primary" link @click="deleteHandle(scope.row.id)" >删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog  ref="addOrUpdate" :title="!submitForm.id ? '新增' : '修改'"  v-model="dialogVisible" width="40%" class="customDialog">
			<el-form :model="submitForm" :rules="submitFormRule" ref="ruleFormRef" @keyup.enter.native="dataFormSubmit" label-width="120px">
				<el-form-item label="AppName" prop="appname">
					<el-input v-model="submitForm.appname" placeholder="请输入AppName" :maxlength="64" ></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="title">
					<el-input v-model="submitForm.title" placeholder="请输入名称" :maxlength="20"></el-input>
				</el-form-item>
				<!-- <el-form-item label="排序" prop="order">
				<el-input v-model="submitForm.order" placeholder="请输入排序" :maxlength="20" type="number"></el-input>
				</el-form-item> -->
				<el-form-item label="注册方式" prop="addressType">
					<el-radio-group  v-model="submitForm.addressType" @change="handleRadio()" class="home-radio">
						<el-radio-button :label="0">自动注册</el-radio-button>
						<el-radio-button :label="1">手动录入</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="机器地址" prop="addressList">
					<el-input v-model="submitForm.addressList" placeholder="请输入执行器列表地址，多个逗号隔开" :disabled="!submitForm.addressType" :maxlength="512"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="xxljobGroup">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import {scheduleApi} from '/@/api/scheduleapi'
export default defineComponent({
	setup () {
		const queryFormRef = ref<FormInstance>()
		const ruleFormRef = ref();
		const state = reactive({
			isShow: false,
			listLoading: false,
			dataList: [],
			total: 0,
			totalSelect: 0,
			hasDelFile: false,
			param: {
				page: 1,
				limit: 10,
				dataForm: {
					name:''
				}
			},
			submitForm: {
				id: 0,
				appname: '',
				title: '',
				order: 0,
				addressType: 0,
				addressList: ''
			},
			dataListSelections: [],
			dialogVisible: false,
			submitFormRule: {
				appname: [
					{ required: true, message: 'AppName不能为空', trigger: 'blur' }
				],
				title: [
					{ required: true, message: '名称不能为空', trigger: 'blur' }
				],
				/* order: [
					{ required: true, message: '排序不能为空', trigger: 'blur' }
				], */
				addressType: [
					{required: true, message: '请选择注册类型', trigger: 'blur'}
				],
				addressList: [
					{required: false, message: '请选择注册类型', trigger: 'blur'}
				]
			}
		})

		// 页面加载时
		onMounted(() => {
			// 列表查询
			loadList()
		})

		//查询
		const loadList = () => {
			state.listLoading = true
			scheduleApi().getXxlJobGroupList().then(data => {
				if (data && data.code === 0) {
					state.dataList = data.list
				} else {
					state.dataList = []
				}
			}).catch(() => {
			}).finally(() => {
				state.listLoading = false
			})
		}

		const selectionChangeHandle = (val: any) => {
			state.dataListSelections = val
		}

		const formatAddressType = (row, column, cellValue, index) => {
			return cellValue ? '手动录入' : '自动注册';
		}

		const addHandle = () => {
			state.submitForm = {
				id: 0,
				appname: '',
				title: '',
				order: 0,
				addressType: 0,
				addressList: ''
			}
			state.dialogVisible = true
		}

		const addOrUpdateHandle = (row: any | undefined) => {
			if(!row){
				state.submitForm = state.dataListSelections[0]
			} else {
				state.submitForm = row
			}
			state.dialogVisible = true
		}
		// 删除
		const deleteHandle = (id: string | undefined) => {
			ElMessageBox.confirm('是否确定删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(() => {
				var ids = id ? [id] : state.dataListSelections.map(item => {
					return item.id
				})
				const loading = ElLoading.service({
					lock: true,
					text: '处理中',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				scheduleApi().deleteXxlJobGroup(ids).then((data) => {
					if (data && data.code === 0) {
						ElMessage.success('删除成功！')
						loadList()
					} else {
						ElMessage.error(data.msg)
					}
				}).catch(() => {
					ElMessage.error('删除失败！')
				}).finally(() => {
					loading.close()
				})
			})
		}

		//取消修改
		const handleClose = () => {
			state.dialogVisible = false
			ruleFormRef.value!.clearFiles()
			loadList()
		}
		const dataFormSubmit = () => {
			ruleFormRef.value.validate((valid: boolean) => {
				if (valid) {
					const loading = ElLoading.service({
						lock: true,
						text: '处理中',
						background: 'rgba(0, 0, 0, 0.7)',
					})
					if(!state.submitForm.id) {
						//新增
						scheduleApi().saveXxlJobGroup(state.submitForm).then(data => {
							loading.close()
							if (data && data.code === 0) {
								state.dialogVisible = false
								loadList()
								ElMessage.success('保存成功')
							} else {
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							loading.close()
							ElMessage.error("保存失败！")
						})
					} else {
						//修改
						scheduleApi().saveXxlJobGroup(state.submitForm).then(data => {
							loading.close()
							if (data && data.code === 0) {
								state.dialogVisible = false
								loadList()
								ElMessage.success('保存成功')
							} else {
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							loading.close()
							ElMessage.error("保存失败！")
						})
					}
				} else {
					return false;
				}
			})
		}
		return {
			loadList,
			queryFormRef,
			deleteHandle,
			dataFormSubmit,
			handleClose,
			selectionChangeHandle,
			ruleFormRef,
			formatAddressType,
			addHandle,
			addOrUpdateHandle,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>